<template>
  <view>
    <scroll-view scroll-x="true" style="background: #fff;">
      <view class="nav-list">
        <view class="nav-item" :class="(curNavIndex == index) ? 'active' : ''" v-for="(item, index) in navList"
          :key="index" @tap="handleChangeNav(index)">
          {{item.title}}
          <text class="nav-line" v-if="curNavIndex == index"></text>
        </view>
      </view>
      <!-- 租车订单 -->
      <view class="nav-list" v-if="curNavIndex == 0">
        <view class="nav-item" :class="(curStatusNavIndex == index) ? 'active' : ''"
          v-for="(item, index) in statusNavList" :key="index" @tap="handleChangeStatusNav(index, item.value)">
          {{item.title}}
          <text class="nav-line" v-if="curStatusNavIndex == index"></text>
        </view>
      </view>

      <!-- 新租售订单 -->
      <view class="nav-list" v-if="curNavIndex == 1">
        <view class="nav-item" :class="(curStatusNavIndex == index) ? 'active' : ''"
          v-for="(item, index) in statusNavList2" :key="index" @tap="handleChangeStatusNav(index, item.value)">
          {{item.title}}
          <text class="nav-line" v-if="curStatusNavIndex == index"></text>
        </view>
      </view>

    </scroll-view>

    <view class="list" v-if="list.length > 0">
      <view class="item" v-for="(item, index) in list" :key="index" @tap="goPage(item.id)">
        <!-- 租车订单 -->
        <view class="top" v-if="curNavIndex == 0">
          <view class="date">{{item.add_time}}</view>
          <view class="status" :class="item.status == 0 ? 'nopaid' : ''">{{ item.status_cn.name }}</view>
        </view>
        <!-- 新租售订单 -->
        <view class="top" v-if="curNavIndex == 1">
          <view class="date">{{item.add_time}}</view>
          <!-- 新租售订单 -->
          <view class="status" :class="item.status == 0 ? 'nopaid' : ''">{{ statusObj[item.status] }}</view>
        </view>
        <view class="middle">
          <view class="main-box">
            <image v-if="curNavIndex == 0" :src="item.type_pic" />
            <image v-if="curNavIndex == 1" :src="item.pic" />
            <view class="main-right">
              <view class="name">{{item.type_name}}</view>
              <!-- 租车订单 -->
              <view class="desc" v-if="curNavIndex == 0">
                {{ item.type_gear }}·{{ item.type_seat_num}}座·{{ item.type_power }}
              </view>
              <!-- 新租售订单 -->
              <template v-if="curNavIndex == 1">
                <view class="periods-sum">{{ item.periods }}期</view>
                <view class="return-car-time">还车时间：{{ item.return_time }}</view>
              </template>
            </view>
          </view>
          <!-- 租车订单时显示 -->
          <template v-if="curNavIndex == 0">
            <view class="use-time">用车时间：{{item.start_time}}-{{item.end_time}}</view>
            <view class="info">{{item.store_name}}</view>
          </template>
        </view>
        <!-- 租车订单： status: // 已取消：-1，未支付：0，待取车：10，租赁中：20，已还车：30，已完成：40, 已支付 99 -->
        <view class="bottom" v-if="curNavIndex == 0">
          <view class="price" v-if="item.status == 0">待支付：<text>￥ {{ item.price }}</text></view>
          <view class="btn-box">
            <!-- 待支付和已支付时显示 -->
            <view class="btn gray" @tap.stop="orderCancel(item.id)" v-if="item.status == 0 || item.status == 99">取消订单
            </view>
            <!-- 待支付时显示 -->
            <view class="btn" @tap.stop="goPage(item.id)" v-if="item.status == 0">立即支付</view>
            <!-- 已支付时显示 -->
            <view class="btn" @tap.stop="returnDeposit(item.id, item.deposit)" v-if="item.status == 99">退押金</view>
          </view>
        </view>

        <!-- 新租售订单：status: 还款中：0；已完成：1；已取消：2 ；-->
        <view class="bottom" v-if="curNavIndex == 1">
          <view class="price" v-if="item.status == 0">待支付：<text>￥ {{ item.per_price }}</text></view>
          <view v-else></view>
          <view class="btn-box">
            <!-- 0、1 显示 查看合同 -->
            <view class="btn gray" @tap.stop="lookContract(item.id)">查看合同</view>
            <!-- 0 对公还款 -->
            <view class="btn" @tap.stop="repaymentToPublic(item.id)" v-if="item.status == 0">对公支付</view>
            <!-- 签订 -->
            <view class="btn" @tap.stop="handleSingin(item)" v-if="item.status == 2">合同签订</view>
          </view>
        </view>
      </view>
    </view>
    <view class="no-data-box" v-else>
      <image src="https://taxi.raxan.xyz/wechat/static/images/empty.png" class="no-data-img" />
      <view class="text">暂无订单</view>
    </view>

  </view>
</template>

<script>
  import {
    getOrderList,
    depositRefund,
  } from '@/api/car.js';
  import {
    signing
  } from '@/api/hire.js'
  export default {
    data() {
      return {
        list: [],
        thisFrom: {
          page: 1,
          limit: 15,
          status: 0, // 已取消：-1，未支付：0，待取车：10，租赁中：20，已还车：30，已完成：40, 已支付 99
          is_new_sale: 0 // is_new_sale 1新租售 0租车
        },
        isloading: false,
        navList: [{
            title: "租车订单",
            value: 0
          },
          {
            title: "新租售订单",
            value: 1
          }
        ],
        curNavIndex: 0,
        curStatusNavIndex: 0,
        statusNavList: [{
            title: '待支付',
            value: 0,
          },
          {
            title: '已支付',
            value: 99,
          },
          {
            title: '已完成',
            value: 40,
          },
          {
            title: '已取消',
            value: -1,
          }
        ],
        statusNavList2: [{
            title: '待签定',
            value: 2
          },
          {
            title: '待审核',
            value: 3
          },
          {
            title: '租售中',
            value: 0,
          },
          {
            title: '已完成',
            value: 1,
          },
        ],
        statusObj: {
          0: '租售中',
          1: '已完成',
          2: '待签定',
          3: '待审核'
        },
        formData: null
      };
    },
    onLoad() {
      // uni.showLoading({title:'正在加载'});
      // this.getList();
    },
    onReachBottom() {
      uni.showLoading({
        title: '正在加载'
      });
      this.getList();
    },
    onShow() {
      uni.showLoading({
        title: '正在加载'
      });
      this.list = [];
      this.thisFrom.page = 1;
      this.getList();
    },
    methods: {
      handleSingin(row) {
        const {
          id,
          sign_type
        } = row

        // 0个人 1企业
        if (sign_type === 0) {
          this.formData = {
            id,
            type: 1
          }
          this.toSign()
        }
        if (sign_type === 1) {
          // this.formData = {
          //   id,
          //   type: 1
          // }
          // this.toSign()
          uni.navigateTo({
            url: '/pages/myCar/uploadHt?type=' + 1 + '&id=' + row.id
          })
        }
        // console.log(row)
      },
      toSign() {
        uni.navigateTo({
          url: '/pages/hire_sub/sign/sign',
          events: {
            saveImage: src => {
              console.log(src)
              this.formData.signature_pic = src;
              signing({
                ...this.formData,
              }).then((res) => {
                console.log(this.formData,res);
                this.getList();
                this.formData = null
              })
            }
          }
        })
      },
      goPage(orderId) {
        // 查看详情
        if(this.curNavIndex==1){
          uni.navigateTo({
            url: `/pages/myCar/newOrderDetail?order_id=${orderId}`
          })
        }else{
          uni.navigateTo({
            url: `/pages/car_sub/order/detail?order_id=${orderId}`
          })
        }
      
      },
      // 订单类型选择
      handleChangeNav(index) {
        console.log('index', index)
        this.curNavIndex = index;
        console.log('this.curNavIndex', this.curNavIndex)


        if (index == this.thisFrom.is_new_sale) return;
        if (this.isloading) return;

        this.curStatusNavIndex = 0;
        this.thisFrom.status = 0;

        this.list = [];
        this.thisFrom.page = 1;
        this.thisFrom.is_new_sale = index;
        if (this.thisFrom.is_new_sale === 1) {
          this.thisFrom.status = 2
        }
        console.log('this.thisFrom.is_new_sale', this.thisFrom.is_new_sale)

        uni.showLoading({
          title: '正在加载'
        });
        this.getList();
      },
      handleChangeStatusNav(index, status) {
        console.log('index,status', index, status)
        this.curStatusNavIndex = index;
        if (status == this.thisFrom.status) return;
        if (this.isloading) return;
        this.list = [];
        this.thisFrom.page = 1;
        this.thisFrom.status = status;
        uni.showLoading({
          title: '正在加载'
        });
        this.getList();
      },
      // 列表
      getList() {
        let that = this;
        let list = [];
        that.isloading = true;
        getOrderList(that.thisFrom).then((res) => {
          list = res.data.list;
          if (list.length > 0) {
            that.list = that.list.concat(list);
            that.thisFrom.page++;
          }
          uni.hideLoading();
          that.isloading = false;
        }).catch((err) => {
          uni.hideLoading();
          that.isloading = false;
          uni.showToast({
            title: '订单列表读取失败',
            icon: 'none'
          })
        })
      },
      // 订单状态选择
      changeStatus(status) {
        if (status == this.thisFrom.status) return;
        if (this.isloading) return;
        this.list = [];
        this.thisFrom.page = 1;
        this.thisFrom.status = status;
        uni.showLoading({
          title: '正在加载'
        });
        this.getList();
      },
      // 取消订单
      orderCancel(orderId) {
        uni.navigateTo({
          url: `/pages/car_sub/cancel_order/index?order_id=${orderId}`
        })
      },
      // 支付订单
      paySubmit(orderId) {
        uni.navigateTo({
          url: '/pages/car_sub/order/payment?order_id=' + orderId
        })
      },
      // 退押金
      returnDeposit(orderId, deposit) {
        let that = this;
        let content = '确定要退押金吗？';
        uni.showModal({
          title: '退押金',
          content: content,
          success(res) {
            if (res.confirm) {
              uni.showLoading({
                title: '取消中...',
                mask: true
              })
              let params = {
                order_id: orderId,
                price: deposit,
                return_type: 'weixin'
              };
              console.log('params----', params)
              depositRefund(params).then((res) => {
                uni.hideLoading();
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none'
                })
                that.list = [];
                that.thisFrom.page = 1;
                that.getList()
              }).catch((err) => {
                uni.hideLoading();
                uni.showToast({
                  title: err,
                  icon: 'none'
                })
              })
            }
          }
        })
      },
      // 查看合同
      lookContract(orderId) {
        uni.navigateTo({
          url: '/pages/car_sub/look_contract/index?order_id=' + orderId + '&type=1'
        })
      },
      // 对公还款
      repaymentToPublic(orderId) {
        uni.navigateTo({
          url: '/pages/car_sub/per_period_cost/index?order_id=' + orderId + '&type=1'
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .nav-list {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #E7E7E7;

    .nav-item {
      position: relative;
      flex: 1;
      text-align: center;
      padding: 26rpx 0;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);

      &.active {
        color: #008DFF;
      }

      .nav-line {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 32rpx;
        height: 6rpx;
        background: #008DFF;
        border-radius: 32rpx;
      }
    }
  }

  .status-title {
    padding: 5rpx 10rpx;
    border-radius: 8rpx;
  }

  .list {
    width: 690rpx;
    margin: 30rpx auto 0;

    .item {
      background: #FFF;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
      padding: 32rpx 28rpx;
      border-radius: 10rpx;
      margin-bottom: 24rpx;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #E7E7E7;

        .date {
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.6);
        }

        .status {
          font-weight: 500;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.9);

          &.nopaid {
            color: #FF5700;
          }
        }
      }

      .middle {
        padding-top: 24rpx;

        .main-box {
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;

          image {
            width: 332rpx;
            height: 160rpx;
            margin-right: 16rpx;
            border: 1rpx solid #ccc;
            box-sizing: border-box;
            border-radius: 4rpx;
          }

          .main-right {
            .name {
              font-weight: 600;
              margin-bottom: 16rpx;
              font-size: 32rpx;
              color: rgba(0, 0, 0, 0.9);
            }

            .desc {
              font-weight: 400;
              font-size: 24rpx;
              color: rgba(0, 0, 0, 0.6);
            }

            .periods-sum {
              font-size: 28rpx;
              color: rgba(0, 0, 0, 0.9);
            }

            .return-car-time {
              margin-top: 10rpx;
              font-weight: 400;
              font-size: 28rpx;
              color: rgba(0, 0, 0, 0.9);
            }
          }
        }

        .use-time {
          margin-bottom: 24rpx;
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
        }

        .info {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
        }
      }

      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 24rpx;
        margin-top: 24rpx;
        border-top: 1rpx solid #E7E7E7;

        .price {
          font-weight: 500;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.9);
          line-height: 33rpx;

          text {
            font-weight: 500;
            font-size: 28rpx;
            color: #FF5700;
          }
        }

        .btn-box {
          display: flex;
          align-items: center;
        }

        .btn {
          width: 160rpx;
          height: 72rpx;
          line-height: 72rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          text-align: center;
          background: #008DFF;
          border-radius: 8rpx;
          margin-right: 20rpx;

          &:last-child {
            margin-right: 0;
          }

          &.gray {
            background: #F8F9FC;
            color: rgba(0, 0, 0, 0.9);
            font-weight: 400;
          }
        }
      }
    }
  }

  .no-data-box {
    .no-data-img {
      width: 360rpx;
      height: 360rpx;
      display: block;
      margin: 200rpx auto 10rpx;
    }

    .text {
      text-align: center;
      font-size: 26rpx;
      color: #B9B9BD;
    }
  }
</style>